﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Sisocana.Core.Models.VideoAsociadoModel>" %>

    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
    <link href="<%: Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />

  
    
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       
        $("p a, input:submit,input:file ").button();
        $("#slider-heigth").slider({
            range: "min",
            min: 20,
            max: 1000,
            change: function (event, ui) {
                $("#lheigth").text("Heigth " + $("#slider-heigth").slider("value") + "px");
                $("#heigth").val($("#slider-heigth").slider("value"));

            },
            create: function (event, ui) {
                var valor = $("#heigth").val();
                $("#slider-heigth").slider("option", "value", valor);
            }

        });
        $("#lheigth").text("Heigth " + $("#slider-heigth").slider("value") + "px");
        $("#heigth").val($("#slider-heigth").slider("value"));

        $("#slider-width").slider({
            range: "min",
            min: 60,
            max: 1000,
            change: function (event, ui) {
                $("#lwidth").text("Width " + $("#slider-width").slider("value") + "px");
                $("#width").val($("#slider-width").slider("value"));

            },
            create: function (event, ui) {
                var valor = $("#width").val();
                $("#slider-width").slider("option", "value", valor);
            }
        });
        $("#lwidth").text("Width " + $("#slider-width").slider("value") + "px");
        $("#width").val($("#slider-width").slider("value"));


    });
</script>
<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true) %>
        <fieldset>
        <legend>Video Gallery Customization</legend> 
        <%:Html.HiddenFor(model => model.idSitio) %>
        <%:Html.HiddenFor(model => model.id) %>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.VideoAsociadoName,"Video Content Name") %>
        </div>
        <div class="editor-field">
            <% = Html.DropDownList("VideoAsociadoName")%>         
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.tagBusqueda) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.tagBusqueda) %>
            <%: Html.ValidationMessageFor(model => model.tagBusqueda) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.apiKey) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.apiKey)%>
            <%: Html.ValidationMessageFor(model => model.apiKey)%>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.tipo) %>
        </div>
        <div class="editor-field">
            <% = Html.DropDownList("tipo")%>         
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.cantVisualizar) %>
        </div>
        <div class="editor-field">
            <% = Html.DropDownList("cantVisualizar")%>         
        </div>
        <div id="1">
              <div class="editor-field">
                <%: Html.HiddenFor(model => model.width)%>
                <label id="lwidth" ></label>                
            </div>
            <div id="slider-width" class="customSlider"></div>
            
            <div class="editor-field">
                <%: Html.HiddenFor(model => model.heigth)%> 
                <label id="lheigth" ></label>
            </div>
            <div id="slider-heigth" class="customSlider"></div>
        </div>
	    <script type="text/javascript">
	        $('#tipo').change(function () {
	            if ($('#tipo').val() == "Small") {
	                $('#1').hide();
	                while ($('#cantVisualizar').find('option').size() > 0)
	                    $('#cantVisualizar').find('option').remove();
	                $('#cantVisualizar').append('<option value=4>4</option>');
	                $('#cantVisualizar').append('<option value=8>8</option>');
	            }
	            else {
	                $('#1').show();
	                while ($('#cantVisualizar').find('option').size() > 0)
	                    $('#cantVisualizar').find('option').remove();
	                $('#cantVisualizar').append('<option value=1>1</option>');
	                $('#cantVisualizar').append('<option value=2>2</option>');
	                $('#cantVisualizar').append('<option value=3>3</option>');
	                $('#cantVisualizar').append('<option value=4>4</option>');
	                $('#cantVisualizar').append('<option value=5>5</option>');
	                $('#cantVisualizar').append('<option value=6>6</option>');
	                $('#cantVisualizar').append('<option value=7>7</option>');
	                $('#cantVisualizar').append('<option value=8>8</option>');
	                $('#cantVisualizar').append('<option value=9>9</option>');
	                $('#cantVisualizar').append('<option value=10>10</option>');
	            }
	        });
	        $(document).ready(function () {
	            if ($('#tipo').val() == "Small") {
	                $('#1').hide();
	            }
	            else
	                $('#1').show();
	        });
        </script>

        <p>
            <% if (Model.tagBusqueda == null || Model.tagBusqueda.Equals(""))
               {%>
                <input type="submit" value="Create" />
             <%}
               else
               {%>
                <input type="submit" value="Update" />
            <% } %>
        </p>
                </fieldset>
<% } %>




